/**
 * 项目管理的modal
 * @author: zxy
 * @update: 2017-03-15
 */

import React, {PropTypes} from 'react';
import {Modal, Form, Button, Input, Select, Switch, Spin} from 'antd';
import CommonToggle from '../Common/CommonToggle';
const FormItem = Form.Item;
const Option = Select.Option;

const ProjectManageModal = ({
  title,
  item,
  visible,
  modalLoading,
  btnLoading,
  onOk,
  onOkAndAdd,
  onCancel,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    resetFields,
  },
}) => {

  const formItemLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 18},
  };

  function handleOk() {
    validateFields((errors) => {
      if (errors) {
        return;
      }

      const formData = getFieldsValue();

      console.log(formData)

      onOk(data, () => {
        resetFields();
      });

    });
  };

  const modalOpts = {
    title,
    visible,
    width: 600,
    maskClosable: false,
    onCancel,
    footer: (
      <div>
        <Button onClick={() => {
          handleOk(onOkAndAdd)
        }} size="large" loading={btnLoading}>保存并继续添加</Button>
        <Button type="primary" onClick={() => {
          handleOk(onOk)
        }} size="large" loading={btnLoading}>保存</Button>
      </div>
    )
  }

  return (
    <Modal {...modalOpts} onOk={handleOk} >
      <Spin spinning={modalLoading} tip="加载中...">
        <Form layout='horizontal' className="modal-form">
          <FormItem
            {...formItemLayout}
            label="项目编号"
            hasFeedback
          >
            {
              getFieldDecorator('project_num', {
              rules: [{
                type: 'string',
              }],
            })(
              <Input placeholder="用于快速检索项目"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="项目名称"
            hasFeedback
          >
            {getFieldDecorator('project_name', {
              rules: [{
                type: 'string',
              }, {
                required: true, message: '项目名称未填写',
              }],
            })(
              <Input placeholder="请输入项目名称"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="项目价格"
            hasFeedback
          >
            {getFieldDecorator('project_price', {
              rules: [{
                type: 'string'
              }, {
                required: true, message: '项目价格未填写',
              }],
            })(
              <Input placeholder="请输入项目价格" addonAfter="元"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="项目分类"
            hasFeedback
          >
            {getFieldDecorator('classify',)(
              <Select placeholder="请选择">
                <Option value="male">足疗</Option>
                <Option value="female">按摩</Option>
                <Option value="frute">艾灸</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="服务时长"
            hasFeedback
          >
            {getFieldDecorator('service_times', {
              rules: [{
                type: 'string'
              }, {
                required: true, message: '服务时长未填写',
              }],
            })(
              <Input placeholder="请输入服务时长" addonAfter="元"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="轮钟提成"
            hasFeedback
          >
            {getFieldDecorator('round_commission', {
              rules: [{
                type: 'string'
              }],
            })(
              <Input placeholder="请输入轮钟提成" addonAfter="元"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="点钟提成"
            hasFeedback
          >
            {getFieldDecorator('point_commission', {
              rules: [{
                type: 'string'
              }],
            })(
              <Input placeholder="请输入点钟提成" addonAfter="元"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="加钟提成"
            hasFeedback
          >
            {getFieldDecorator('add_commission', {
              rules: [{
                type: 'string'
              }],
            })(
              <Input placeholder="请输入加钟提成" addonAfter="元"/>
            )}
          </FormItem>

          <CommonToggle title="添加更多信息" body={
            (
              <div>
                <FormItem
                  label="服务流程："
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('service_process',)(
                    <Input placeholder="请输入服务流程" type="textarea" rows="3" max={100}/>
                  )}
                </FormItem>
                <FormItem
                  label="赠品："
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('freebie')(
                    <Input placeholder="请输入赠品" type="textarea" rows="3" max={100}/>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="会员卡享受折扣"
                >
                  <Switch checkedChildren={'开'} unCheckedChildren={'关'}/>
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="计钟数"
                  hasFeedback
                >
                  {getFieldDecorator('clock_number',)(
                    <Select placeholder="请选择">
                      <Option value="male">1个钟</Option>
                      <Option value="female">按摩</Option>
                      <Option value="frute">艾灸</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="上门选项"
                  hasFeedback
                >
                  {getFieldDecorator('door_options',)(
                    <Select placeholder="请选择">
                      <Option value="male">仅到店</Option>
                      <Option value="female">可上门</Option>
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="公开展示"
                  hasFeedback
                >
                  {getFieldDecorator('public_display',)(
                    <Select placeholder="请选择">
                      <Option value="male">不公开，只在内部展示</Option>
                      <Option value="female">公开展示</Option>
                    </Select>
                  )}
                </FormItem>
              </div>
            )
          }
          />
        </Form>
      </Spin>
    </Modal>
  );
};

ProjectManageModal.propTypes = {
  title: PropTypes.any,
  visible: PropTypes.any,
  item: PropTypes.object,
};

export default Form.create()(ProjectManageModal);